<template>
  <div class="editor-container editor-container-scss">
    <editor-header @save="handleSave" v-if="editable"></editor-header>
    <div class="editor-main" :class="{ 'not-editable': !editable }">
      <editor-icon v-if="editable" class="editor-icon"></editor-icon>
      <editor-canvas :editable="editable" class="editor-canvas"></editor-canvas>
      <editor-props v-if="editable" class="editor-props"></editor-props>
    </div>
  </div>
</template>

<script setup lang="ts">
import './assets/iconfont.css'
import EditorProps from './EditorProps/index.vue'
import EditorCanvas from './EditorCanvas/index.vue'
import EditorIcon from './EditorIcon/index.vue'
import EditorHeader from './EditorHeader/index.vue'
import { LockState } from '@meta2d/core'
import { isEmpty } from '@pureadmin/utils'
import { closeHttpAndWebsocket, reHttpAndWebsocket } from './utils/index'
declare const window: any // eslint-disable-line

defineOptions({ name: 'TopologyEditor' })

const props = defineProps({
  data: { type: String, require: true },
  editable: { type: Boolean, default: true }
})

const router = useRouter()
const query = reactive(router.currentRoute.value.query)
onMounted(() => {
  initEditor()
})
onBeforeUnmount(() => {
  closeHttpAndWebsocket()
})
const emit = defineEmits(['save'])

function initEditor() {
  if (!isEmpty(props.data)) {
    try {
      const json = JSON.parse(props.data)
      if (!isEmpty(json)) { window.meta2d.open(json) }
      if (!props.editable) {
        window.meta2d.lock(LockState.DisableEdit)
        window.meta2d.fitView(true, 0)
        window.meta2d.setGrid({
          grid: false,
          gridColor: '#e2e2e2',
          gridSize: 20,
          gridRotate: 0
        })
        window.meta2d.setRule({
          rule: false,
          ruleColor: '#888888'
        })
      } else {
        window.meta2d.setGrid({
          grid: true,
          gridColor: '#e2e2e2',
          gridSize: 20,
          gridRotate: 0
        })
        window.meta2d.setRule({
          rule: true,
          ruleColor: '#888888'
        })
        window.meta2d.lock(0)
      }
      console.log('默认Http/Websocket链接');
      reHttpAndWebsocket()
    } catch (e) {
      console.error(e)
    }
  }
}

function handleSave() {
  const data = window.meta2d.data()
  /**
   * 设置自定义解析函数
   */
  if (data && window.meta2d.store.data.socketCbJs) {
    data.socketCbJs = window.meta2d.store.data.socketCbJs
  }
  const json = JSON.stringify(data, undefined, 4)
  emit('save', json)
}

watch(
  () => props.data,
  () => {
    initEditor()
  }
)
</script>

<style lang="scss" scoped>
@import '@/components/TopologyEditor/assets/editor-variable.scss';

.editor-container {

  position: relative;
  width: 100%;
  height: 100%;
  background-color: $--editor-background-color;
  border: 1px solid $--editor-border-color;

  .editor-header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid $--editor-header-border-color;
    box-shadow: 0px 2px 4px $--editor-header-shadow-color;
    z-index: 1000;
  }

  .editor-main {
    height: 100%;
    padding-top: 50px;
    overflow: hidden;
    position: relative;
    display: flex;

    &.not-editable {
      padding-top: 0;
    }

    .editor-icon {
      flex: 0 300px;
      width: 0;
      height: 100%;
      // overflow-y: auto;
      border-right: 1px solid $--editor-header-border-color;
      box-shadow: 0px 5px 5px 1px $--editor-header-shadow-color;
      z-index: 100;
    }

    .editor-canvas {
      flex: 1;
      position: relative;
      overflow: hidden;
    }

    .editor-props {
      flex: 0 300px;
      width: 0;
      height: 100%;
      overflow-y: auto;
      border-left: 1px solid $--editor-header-border-color;
      box-shadow: 0px 5px 5px 1px $--editor-header-shadow-color;
      z-index: 100;
    }
  }
}
</style>
